// webpack的配置文件
const { options } = require("less");
const { type } = require("os");
const path = require("path");
// 引入抽离css插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 引入css文件自动引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入css压缩插件
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
// 引入自动清除构建结构插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const config = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "development"),
    filename: "item.js",
    clean: true,
  },
  // 打包文件的规则便于调试，是否可以定位到代码行
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        oneOf: [
          // 处理css文件
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
            ],
          },
          // 处理less文件
          {
            test: /\.less$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
              "less-loader",
            ],
          },
          // 处理sass/scss文件
          {
            test: /\.s[ac]ss$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    Plugin: ["postcss-preset-env"],
                  },
                },
              },
              "sass-loader",
            ],
          },
          // 处理图片
          {
            test: /\.(jpe?g|png|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 20 * 1024,
              },
            },
            generator: {
              filename: "static/images/[hash][ext][query]",
            },
          },
          // 处理js兼容问题
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            options: {
              // 开启缓存
              cacheDirectory: true,
              cacheCompression: false,
            },
          },
        ],
      },
    ],
  },
  // css抽离成单独的文件
  plugins: [
    new MiniCssExtractPlugin({
      filename: "static/css/app.css",
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
    new CssMinimizerWebpackPlugin(),
    new CleanWebpackPlugin(),
  ],
  // 配置别名
  resolve: {
    // 路径别名
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};
config.mode = process.env.NODE_ENV;
if (config.mode === "development") {
  config.devServer = {
    host: "0.0.0.0",
    open: true,
    port: 9000,
    hot: true,
  };
}
console.log(config.mode);

module.exports = config;
